<template>
	<div class="post-comment">
		<van-field
		  v-model.trim="message"
		  autosize
		  type="textarea"
		  maxlength="50"
		  placeholder="请输入评论"
		  show-word-limit
		/>
		<van-button size="small" class="post-btn" :disabled="!message" @click="onPost">发布</van-button>
	</div>
</template>

<script>
	import { addComment } from '../../../utils/comment.js'
	
	export default {
		name:'PostComment',
		data() {
			return {
				message:''
			}
		},
		props:{
			target: {
				type:[Number,String,Object],
				required:true
			},
			articleId: {
				type:[Number,String,Object],
				default:null
			}
		},
		methods: {
			 async onPost() {
				const { data } = await addComment({
					target:this.target.toString(),
					content:this.message,
					art_id:this.articleId ? this.articleId.toString() : null
				})
				
				
				this.$emit('post-success',data.data.new_obj)
				
				this.message = ''
			}
		}
		
	}
</script>

<style scoped="scoped">
	.post-comment {
		display: flex;
		align-items: center;
		padding: 14px;
	}
	.post-btn {
		width: 60px;
	}
</style>
